import 'package:flutter/material.dart';

class LightChainWidget extends StatefulWidget {
  final List lampItemInfoList;
  final double multiColorWidth;
  final double multiColorHeight;
  const LightChainWidget({Key key, this.lampItemInfoList, this.multiColorWidth, this.multiColorHeight}) : super(key: key);

  @override
  _LightChainWidgetState createState() => _LightChainWidgetState();
}

class _LightChainWidgetState extends State<LightChainWidget> {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.width * 2 / 8,
          child: Image.asset(
            "assets/images/previewbulb.png",
          ),
        ),
        Container(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.width * 2 / 8,
          child: Stack(
            children: widget.lampItemInfoList.map((e) {
              return LuminousDot(
                multiColorWidth: widget.multiColorWidth,
                multiColorHeight: widget.multiColorHeight,
                left: e.x,
                top: e.y,
                color: Colors.white,
                image: 'assets/images/lamp_border.png',
                width: 33,
                height: 47,
              );
            }).toList(),
          ),
        ),
        Container(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.width * 2 / 8,
          child: Stack(
            children: widget.lampItemInfoList.map((e) {
              return LuminousDot(
                multiColorWidth: widget.multiColorWidth,
                multiColorHeight: widget.multiColorHeight,
                left: e.x,
                top: e.y,
                color: e.color,
                image: e.lampimage,
                width: 33,
                height: 47,
              );
            }).toList(),
          ),
        ),

      ],
    );
  }
}

class LuminousDot extends StatefulWidget {
  final Color color;
  final double left;
  final double top;
  final String image;
  final double width;
  final double height;
  final double multiColorWidth;
  final double multiColorHeight;

  const LuminousDot({
    Key key,
    this.color,
    this.left,
    this.top,
    this.multiColorWidth,
    this.multiColorHeight,
    this.image,
    this.width,
    this.height,
  }) : super(key: key);

  @override
  _LuminousDotState createState() => _LuminousDotState();
}

class _LuminousDotState extends State<LuminousDot> {
  @override
  Widget build(BuildContext context) {
    return Positioned(
      left: widget.left / 800 * widget.multiColorWidth,
      top: widget.top / 200 * widget.multiColorHeight,
      child: Image.asset(
        widget.image,
        color: widget.color,
        width: (widget.width / 800) * widget.multiColorWidth,
        height: (widget.height / 200) * widget.multiColorHeight,
      ),
    );
  }
}